<template>
  <div>
      <div id="pieChart" ref="pieChart" style="width: 500px; height: 700px; background-color: rgb(11,16,51);"></div>
    
  </div>
</template>

<script>
export default {
  name: 'PieChart',

  data() {
    return {
        num:-1,
          serList: [
                { value: 1048, name: '自然磨损1' },
                { value: 735, name: '自然磨损2' },
                { value: 580, name: '自然磨损3' },
                { value: 484, name: '自然磨损4' },
                { value: 300, name: '自然磨损5' }
          ]
    };
  },

  mounted() {
      this.makePieChart();
  },

  methods: {
    makePieChart() {
     
      let myChart = this.$echarts.init(this.$refs.pieChart);
     let option = {
          title: {
            text: '故障原因分布',
            textStyle: {
              color: '#fff',
              fontSize:25
            },
            left: 'center'
            
          },
          tooltip: {
            trigger: 'item'
          },
          legend: [{
            orient: 'vertical',
            left: 50,
            textStyle:{
              color:"#fff"
            },
            icon:'circle',
            bottom:50,
            data:[
                { value: 1048, name: '自然磨损1' },
                { value: 735, name: '自然磨损2' },
          
           ],
            formatter:(name,index)=>{
              console.log(name,index,"-------")
              this.num++;
              console.log(name,index,"-----")
              console.log(this.num)
              return `${name}  \n ${this.serList[this.num].value}`
          
            }
          },
          {
            orient: 'vertical',
            right:50 ,
            textStyle:{
              color:"#fff"
            },
            icon:'circle',
            bottom:50,
            data:[
               { value: 580, name: '自然磨损3' },
                { value: 484, name: '自然磨损4' },
                { value: 300, name: '自然磨损5' }
           ],
            formatter:(name,index)=>{
              console.log(name,index,"-------")
              this.num++;
              console.log(name,index,"-----")
              console.log(this.num)
              return `${name}  \n ${this.serList[this.num].value}`
          
            }
          },
        ],
          series: [
            {
              name: 'Access From',
              type: 'pie',
              // 第一个 空心大小   第二个整个图形大小
            //  radius: ['40%', '50%'],
              data:this.serList,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        myChart.setOption(option);
        window.addEventListener('resize', function () {
          myChart.resize();
        })
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize',this.$refs.pieChart.__echart_instance__.resize);
  },
};
</script>